// import "./App.css";
// import { Routes, Route, NavLink, Link, Navigate } from "react-router-dom";
// import Page1 from "./page1";
// import Page2 from "./page2";
// import Page3 from "./page3";
// import PageSon2 from "./pageSon2";
// import PageSon1 from "./pageSon1";
// import { Lazy, Suspense } from "react";
// const lazyPage4 = Lazy(() => import("./page4"));
// export default function App() {
//   const token = localStorage.getItem("token");
//   return (
//     <div className="App">
//       <h1>菜单</h1>
//       <div>
//         <NavLink to="/page1">page1</NavLink>
//         <NavLink to="/page2">page2</NavLink>
//         <NavLink to="/page3">page3</NavLink>
//         <NavLink to="/page4">page4</NavLink>
//       </div>
//       <div>
//         <Link to="/page1">page1</Link>
//         <Link to="/page2">page2</Link>
//         <Link to="/page3">page3</Link>
//         <Link to="/page4">page4</Link>
//       </div>
//       <Routes>
//         {/* {token ? <Route path="/page1" element={<Page1></Page1>}></Route> : ""} */}
//         <Route
//           path="/page1"
//           element={token ? <Page1></Page1> : <Navigate to="/page4"></Navigate>}
//         ></Route>
//         <Route path="/page2" Component={Page2}>
//           <Route path="pageSon1" element={<PageSon1></PageSon1>}></Route>
//           <Route path="pageSon2" Component={PageSon2}></Route>
//         </Route>
//         <Route path="/page3/:id" Component={Page3}></Route>
//         <Suspense fallback={<div>loading...</div>}>
//           <Route path="/page4" Component={lazyPage4}></Route>
//         </Suspense>
//       </Routes>
//     </div>
//   );
// }
